<template>
  <div>
    <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-page-header @back="" :content="this.$router.currentRoute.name.substring(this.$router.currentRoute.name.indexOf('/')+1)">
      </el-page-header>
      <el-container>
        <div id="showMain">
          <el-form :inline="true" ref="form"  size="small" style="margin-top: 2vh">
            <div class="block" style="margin-bottom: 1vh">
              <el-date-picker
                  v-model="value2"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="height: 34px;"
                  :picker-options="pickerOptions">
              </el-date-picker>
              <el-form-item>
                <el-select v-model="accountName" style="width: 140px;" filterable placeholder="请选择账号" @change="getRechargeRecords()">
                  <el-option
                      v-for="(item,index) in accounts"
                      :key="index"
                      :label="item"
                      :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item >
                <el-button style="margin-left: 2vh;" icon="el-icon-refresh" @click="reset()">重置</el-button>
                <el-button type="primary" style="margin-left: 2vh;" icon="el-icon-search" @click="getRechargeRecords()">查询</el-button>
              </el-form-item>
            </div>
          </el-form>
          <div ref="histogram" id="histogram">
          </div>
        </div>
      </el-container>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value2:null, // 日期选择器
      accountName:'',
      accounts:[],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      datas:[],
      datas2:[],
      dates:[],

    }
  },
  methods: {
    /**
     * 查询所有账号
     */
    async getAllAccountList(){
      const {data: res} = await this.$http.get("/system/user/qt/findRoleList");
      if(!res.success){
        return this.$message.error("获取账号列表失败:"+res.data);
      }
      if (res.data!=null){
        this.accounts = res.data;
      }else{
        this.accounts=null
      }
    },
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(this.$refs.histogram);
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '充值记录',
          subtext: '数据来源：当前所选账号充值每次记录',
          left: 'center',
          textStyle: {
            color: '#333',
            fontWeight: 'bold',
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow', // 显示阴影效果
          },
        },
        legend: {
          data: ['充值金额', '累计充值'],
          top: '10%',
          textStyle: {
            color: '#666',
          },
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '10%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: this.dates, // 可替换为动态日期数据
          axisLine: {
            lineStyle: {
              color: '#888',
            },
          },
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: [
          {
            type: 'value',
            name: '充值金额 (元)',
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#888',
              },
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
              },
            },
          },
          {
            type: 'value',
            name: '累计充值 (元)',
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#888',
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '充值金额',
            type: 'bar',
            data: this.datas, // 替换为动态数据
            itemStyle: {
              color: '#3b82f6', // 自定义柱状图颜色
            },
            barWidth: '40%',
          },
          {
            name: '累计充值',
            type: 'line',
            yAxisIndex: 1,
            data: this.datas2, // 累加动态数据
            smooth: true, // 曲线平滑
            itemStyle: {
              color: '#f97316', // 折线图颜色
            },
            lineStyle: {
              width: 2,
            },
            symbol: 'circle',
            symbolSize: 8,
          },
        ],
        dataZoom: [
          {
            type: 'inside', // 内部拖动缩放
            start: 0,
            end: 170,
          },
          {
            type: 'slider', // 底部滚动条
            start: 0,
            end: 170,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    async reset(){
      this.accountName=''
      this.setDefaultDateRange();
      this.getRechargeRecords();
    },
    setDefaultDateRange() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      this.value2 = [start, end];
    },
    convertToTargetFormat(isoDate) {
      const date = new Date(isoDate);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    convertToTargetUnTimeFormat(isoDate) {
      const date = new Date(isoDate);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    async getRechargeRecords() {
      this.datas = []; // 存储每次的金额
      this.datas2 = []; // 存储累加金额
      this.dates = []; // 存储时间
      let cumulativeAmount = 0; // 用于累加金额的变量

      const { data: res } = await this.$http.post("/comcentre/recharge/getRechargeRecords", {
        startTime: this.convertToTargetFormat(this.value2[0]),
        stopTime: this.convertToTargetFormat(this.value2[1]),
        accountName:this.accountName
      });

      console.log(res.data);

      for (let i of res.data) {
        const amount = i.money; // 当前金额
        const date = i.createTime; // 当前时间

        this.dates.push(date); // 将时间推入 dates
        this.datas.push(amount); // 将金额推入 datas

        cumulativeAmount += amount; // 累加金额
        this.datas2.push(cumulativeAmount); // 将累加金额推入 datas2
      }

      this.drawChart(); // 绘制图表
    }
  },

  created() {

  },
  mounted() {
    this.setDefaultDateRange(); // 设置默认日期范围为最近一周
    this.getAllAccountList();
    this.getRechargeRecords();
  },
};
</script>

<style scoped>
.el-main {
  padding: 0;
}
.advanced-box-shadow {
  background-color: #ffffff; /* 背景颜色 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), /* 主阴影 */ 0 1px 3px rgba(0, 0, 0, 0.06); /* 轻微阴影 */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  margin: 0 3vh;
  padding: 3vh 2vh;
}
#showMain {
  width: 80vw;
  height: 79vh;
}
#histogram {
  width: 78vw;
  height: 70vh;
  margin: 2vh auto 10vh;
}
</stylescoped>